<template>
  <div class="main">
    <div class="content" v-if="!isEmpty">
      <div v-for="(item, index) in oData" :key="index">
        <div class="title">
          <span><span style="font-family: Wingdings;font-size:12pt;line-height:150%;">Ø</span> {{ item.title }}</span>
        </div>
        <div class="schema">
          <span>Function {{ item.schema }} (</span
          ><span v-for="(itemm, indexx) in item.input" :key="indexx">{{
            indexx !== item.input.length - 1 ? formatType(itemm.type) + ' ' + itemm.parame + ', ' : formatType(itemm.type) + ' ' + itemm.parame
          }}</span
          ><span>) : {{ item.schema }}</span>
        </div>
        <div class="input">
          <span class="label">输入参数：</span>
          <p v-for="(itemm, indexx) in item.input" :key="indexx">
            <span class="value">参数：</span>
            <span class="parame">{{ itemm.parame }}</span>
            <span class="description">{{ itemm.description }}</span>
            <span class="type">{{ formatType(itemm.type) }}</span
            ><span>型</span>
          </p>
        </div>
        <div class="output">
          <span class="label">输出参数：</span>
          <div v-if="item.output.length > 0">
            <p v-for="(itemm, indexx) in item.output" :key="indexx">
              <span class="value">参数：</span>
              <span class="parame">{{ itemm.parame }}</span>
              <span class="description">{{ itemm.description }}</span>
              <span class="type">{{ formatType(itemm.type) }}</span
              ><span>型</span>
            </p>
          </div>
          <p v-else>
            无
          </p>
        </div>
        <br />
      </div>
    </div>
    <div v-else>
      <h3>没有导出任何数据...</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      oData: [],
      isEmpty: true,
    };
  },
  mounted() {
    let oData = localStorage.getItem('oData');
    if (oData !== null) {
      this.oData = JSON.parse(oData);
      this.isEmpty = false;
    } else {
      this.isEmpty = true;
    }
  },
  methods: {
    formatType(type) {
      if (type) {
        let _str = type;
        _str = _str.replace(_str[0], _str[0].toUpperCase());
        return _str;
      } else {
        return '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  .content {
    .title {
      font-family: 'FangSong_GB2312', 'FangSong', 'STFangsong', SimSun;
      font-size: 16px;
    }
    .schema {
      font-family: 'Times New Roman', serif;
      font-size: 14px;
      color: #0000ff;
    }
    .input,
    .output {
      font-family: '宋体';
      font-size: '13.3333px';
      .label {
        font-weight: 700;
        .insert-label {
        }
      }
      .value {
      }
      .parame {
        font-family: 'Courier New';
      }
      .description {
      }
      .type {
        font-family: 'Courier New';
      }
    }
  }
}
</style>
